<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>列表</title>
	[#include "/admin/common/commons.html"]
	[#include "/tenant/common/site.html"]
	[@baseHead /]
</head>

<body class="hold-transition skin-blue sidebar-mini">
	<!-- Site wrapper -->
	<div class="wrapper">

		<header class="main-header">
			<!-- Header Navbar: style can be found in header.less -->
			[#include "/admin/common/nav.html"]
		</header>

		<!-- =============================================== -->

		<!-- Left side column. contains the sidebar -->
		<aside class="main-sidebar">
			<!-- sidebar: style can be found in sidebar.less -->
			<section class="sidebar">
				[@user_panel /]
				<!-- search form -->
				[@sidebar_form /]
				<!-- /.search form -->
				<!-- sidebar menu: : style can be found in sidebar.less -->
				<ul class="sidebar-menu" data-widget="tree">
					<li class="header">主面板</li>
					[@menustag id=1]
					[#list list as item]
					[@menu item "1,52,54"]
					[/@menu]
					[/#list]
					[/@menustag]
				</ul>
			</section>
			<!-- /.sidebar -->
		</aside>

		<!-- =============================================== -->

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper" id="app"   v-cloak  >
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<!-- 导航 -->
				<div class="navigation">
					<i>首页</i> <span>列表</span>
				</div>
			</section>
			<!-- Main content -->
			<section class="content">

				<!-- Default box -->
				<div v-if="modelType == 'list'">
					<div class="search">
						<el-form label-width="80px">
							<el-row>

								<el-col :span="24" style="padding: 0 10px;margin-top: 5px;">
									<el-row type="flex" justify="end">
										<el-button size="small" type="primary" @click="search">搜索</el-button>
										<el-button size="small" plain @click="clearData">清除条件</el-button>
									</el-row>
								</el-col>
							</el-row>
						</el-form>
					</div>

					<div style="padding: 10px 2px;">
						<el-button type="primary" size="small" @click="addView">新增</el-button>
					</div>

					<el-table v-loading="loading" :data="tableData.list"  @cell-click="showView" @sort-change="changeTableSort" style="width: 100%;font-size: 12px;">
						<el-table-column width="160" align="center" fixed="right" label="操作">
							<template slot-scope="scope">
								<el-button type="primary" size="mini" @click="editView(scope.row.id)">编辑
								</el-button>
								<el-button type="danger" size="mini"  style="cursor: pointer;"
									@click="deleteData(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

					<div class="page">
						<el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
							:page-size="tableData.size" :pager-count="5"
							layout="total, sizes, prev, pager, next, jumper" :page-count="tableData.totalPage"
							:total="tableData.total" @size-change="sizeChange" @current-change="pageChange">
						</el-pagination>
					</div>
				</div>
				<!-- 增加页面 -->
				<div v-if="modelType == 'add'">
					<el-page-header @back="goBack" content="增加">
					</el-page-header>
					<div style="margin-top: 20px;">
					<el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px" >
						<el-row :gutter="10">
						</el-row>
						<el-row style="text-align: right;">
							<el-button @click="resetForm('ruleForm')">重置</el-button>
							<el-button type="primary" @click="add">确定</el-button>
						</el-row>
					</el-form>
					</div>
				</div>
				<!-- 更新页面 -->
				<div v-if="modelType == 'edit'">
					<el-page-header @back="goBack" content="更新">
					</el-page-header>
					<div style="margin-top: 20px;">
					<el-form ref="form_edit" :rules="rules" :model="form_edit" label-width="160px" >
						<el-row :gutter="10">
						</el-row>
						<el-row style="text-align: right;">
							<el-button @click="cancelEdit">取消</el-button>
							<el-button type="primary" @click="updateData">确定</el-button>
						</el-row>
					</el-form>
					</div>
				</div>
				<div v-if="modelType == 'view'">
					<el-page-header @back="goBack" content="详情">
					</el-page-header>
					<div class="form-title">详细信息</div>
					<el-form class="viewForm" label-width="80px">
					</el-form>
				</div>


				<!-- /.box -->
			</section>

			<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
				<span>确认要删除该条数据吗?</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleClose">确 定</el-button>
				</span>
			</el-dialog>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->

		[#include "/admin/common/footer.html"]

		<!-- Control Sidebar -->
		[#include "/admin/common/aside.html"]

		<!-- /.control-sidebar -->
		<!-- Add the sidebar's background. This div must be placed
     immediately after the control sidebar -->
		<div class="control-sidebar-bg"></div>
	</div>
	<!-- ./wrapper -->
	[@baseScript /]
	<script>
		var vm = new Vue({
			el: '#app',
			data: function () {
				return {
					searchObject: {
						no: 1,
						size: 10,
					},
					modelType:"list",
					dialogVisible: false,
					defaultProps: {
						children: 'children',
						label: 'name'
					},
					form: {
						img: '',
						title: '',
						comments: '',
						storeState: '',
						contents: '',
						ups: '',
						extData: '',
						likes: '',
						addDate: '',
						images: '',
						introduction: '',
						views: ''					},
					form_edit: {
						img: '',
						title: '',
						comments: '',
						storeState: '',
						contents: '',
						ups: '',
						extData: '',
						likes: '',
						addDate: '',
						images: '',
						introduction: '',
						views: ''					},
					viewModel:{},
					loading: false,
					tableData: {},
					rules: {
					},
		        }
		    },
		mounted: function () {
			this.getSearchList();
		},
		methods: {
		    changeTableSort(column) {
				this.searchObject.sortField = column.prop;
                if ("descending" == column.order) {
					this.searchObject.sortMethod = "desc";
				}
				else if("ascending" == column.order){
					this.searchObject.sortMethod = "asc";
				}
				else {
					this.searchObject.sortMethod = "";
				}
				this.getSearchList();
			},
			showView(row, column, cell, event){
			       if(cell.cellIndex>0){
			         return;
			       }
				   var param={};
				   param.id=row.id;
				   this.modelType="view";
				   const loading = this.$loading({
				   lock: true,
				   text: '数据加载中...',
				   spinner: 'el-icon-loading',
				   background: 'rgba(0, 0, 0, 0.7)'
				   });
				   var that=this;
                   $.post("${siteurl}tenantRest/article/view.htm",param,function(res){
                       if(res.code==0){
						Vue.set(vm.$data, 'viewModel', res);
					   }

					   setTimeout(() => {
							loading.close();
							$(document).scrollTop(0);
					   }, 300);
				   });
				  

			},
			goBack(){
				this.modelType="list";
			},
			link(url) {
				this.modelType = url;
			},
            addView(){
				this.modelType="add";
				this.form = {
				};
			},
			add(){
				var self=this;
				this.$refs["ruleForm"].validate((valid) => {
					if (valid) {
						self.addData();
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			addData() {
				var that = this, data = this.form;
				const loading = this.$loading({
					lock: true,
					text: '数据修改中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				$.post("${siteurl}tenantRest/article/create.htm", data, function (res) {
					setTimeout(() => {
						loading.close();
					}, 300);
					if (res.code == 0) {
						that.modelType = 'list';
						that.$message({
							message: '添加数据成功',
							type: 'success'
						});
						that.searchObject.no = 1;
						that.getSearchList();
					} else {
						that.$message.error(res.msg);
					}
				});
			},
			sizeChange(event) {
				this.searchObject.size = event;
				this.getSearchList();
			},
			updateData(){
				var self=this;
				this.$refs["form_edit"].validate((valid) => {
					if (valid) {
						self.updateDataPost();
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			updateDataPost() {
				var that = this, data = this.form_edit;
				const loading = this.$loading({
					lock: true,
					text: '数据修改中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});

				$.post("${siteurl}tenantRest/article/update.htm", data, function (res) {
					setTimeout(() => {
						loading.close();
					}, 300);
					if (res.code == 0) {
						that.modelType = 'list';
						that.$message({
							message: '修改数据成功',
							type: 'success'
						});
						that.getSearchList();
					} else {
						that.$message.error(res.msg);
					}
				});
			},
			// 获取发票详情
			editView(id) {
				var that = this;
				var data ={};
				data.id=id;
				this.modelType="edit";
				$.post("${siteurl}tenantRest/article/view.htm", data, function (res) {
					if (res.code == 0) {
						console.log(res)
						that.form_edit = res;
					}
				});
			},
			// 搜索商品
			search() {
				this.searchObject.no = 1;
				this.getSearchList();
			},
			cancelEdit(){
				this.modelType = 'list';
			},
			// 获取商品列表
			getSearchList() {
				this.loading = true;
				var data = this.searchObject, that = this;
				$.post("${siteurl}tenantRest/article/search.htm", data, function (result) {
					if (result.code == 0) {
						Vue.set(vm.$data, 'tableData', result);
					}
					setTimeout(() => {
						that.loading = false;
					}, 300)
				});
			},
			// 商品分页
			pageChange(index) {
				this.searchObject.no = index;
				this.getSearchList();
			},
			deleteData(event) {
				this.selectId = event.id;
				this.dialogVisible = true;
			},
			clearData() {
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleClose(done) {
				this.dialogVisible = false;
				var self = this;
				if (self.selectId) {
					var params = {};
					params.id = self.selectId;
					$.post("${siteurl}tenantRest/article/delete.htm", params, function (res) {
						if (res.code == 0) {
							self.$message({
								message: '删除数据成功',
								type: 'success'
							});
							self.getSearchList();
						} else {
							self.$message.error(res.msg);
						}
					});
				}
				done();
			}
		  }
		})
	</script>

</body>

</html>